<template>
    <div class="user_item">
        <div class="item1">
            <div class="names">
                <div class="name" @click="openDeatil()">{{ data.user_name }}</div>
                <div class="type">
                    <div class="share" v-if="data.proxy_ip.fees_type == 'free'">共享</div>
                    <div class="exclusive" v-else>独享</div>
                </div>
                <div class="login_status">
                    <div class="status" :class="data.login_status == 2 ? 'status__online' : 'status__offline'">
                        {{ data.login_status == 2 ? '在线' : data.login_status == 1 ? '登录中' : '离线' }}
                    </div>
                    <el-switch :model-value="data.status" size="small" :active-value="1"
                        :disabled="data.login_status == 1" :inactive-value="3"
                        :before-change="() => handleSwitchChange($index, data)" style="margin-left: 4px"
                        inline-prompt />
                </div>
            </div>
            <div class="time">{{ data.proxy_ip.expire_time.slice(0, 10) }} 到期</div>
        </div>
        <div class="item2">
            <div class="id">
                <div class="label">ID:</div>
                <div class="value">{{ data.id }}</div>
            </div>
            <div class="password" style="margin-left: 16px;">
                <div class="label">密码:</div>
                <div class="value">{{ data.pass_word }}</div>
            </div>
            <div class="bctype" style="margin-left: 16px;">
                <div class="label">平台:</div>
                <div class="value">{{ platformObj[data.bc_type]?.name }}</div>
            </div>
        </div>
        <div class="item3">
            <el-row>
                <el-col :span="8" class="item">
                    <div class="label">止赢金额</div>
                    <div class="value">{{ data.stop_amount }}</div>
                </el-col>
                <el-col :span="8" class="item">
                    <div class="label">可用额度</div>
                    <div class="value">{{ data.amount }}</div>
                </el-col>
                <el-col :span="8" class="item">
                    <div class="label">单场最高(足球)</div>
                    <div class="value">{{ data.user_balance.soccer_settings?.R.max || '--' }}</div>
                </el-col>
                <el-col :span="8" class="item" style="margin-top: 16px">
                    <div class="label">单场最高(篮球)</div>
                    <div class="value">{{ data.user_balance.basketball_settings?.R.max || '--' }}</div>
                </el-col>
                <el-col :span="8" class="item" style="margin-top: 16px">
                    <div class="label">当前能量收益</div>
                    <div class="value" style="display: flex;align-items: center;">
                        <div>{{ data.all_beans.toFixed(2) }}</div>
                        <div @click="clickSaveEnergy()"
                            style="margin-left: 8px;font-size: 12px;color: #47acff;cursor: pointer;">查看</div>
                    </div>
                </el-col>
                <el-col :span="8" class="item" style="margin-top: 16px">
                    <div class="label">预估能量收益</div>
                    <div class="value">{{ data.predict_beans.toFixed(2) }}</div>
                </el-col>
            </el-row>
        </div>
        <div class="item4">
            <el-row>
                <el-col :span="6" class="item">
                    <div class="label">来源:</div>
                    <div class="value">{{ data.source.name }}</div>
                </el-col>
                <el-col :span="6" class="item">
                    <div class="label">成数:</div>
                    <div class="value">{{ data.percent }}</div>
                </el-col>
                <el-col :span="6" class="item">
                    <div class="label">玩法:</div>
                    <div class="value">{{ sporttypes[data.sport_type] }}</div>
                </el-col>
                <el-col :span="6" class="item">
                    <div class="label">质量:</div>
                    <div class="value">
                        <div v-if="data.is_good == 0">暂无</div>
                        <div v-if="data.is_good == 1" style="color: #1cc535;">优质</div>
                        <div v-if="data.is_good == 2" style="color: #feac2e;">普通</div>
                        <div v-if="data.is_good == 3" style="color: #ff5f58;">较差</div>
                    </div>
                </el-col>
                <el-col :span="6" class="item" style="margin-top: 8px;">
                    <div class="label">IP类型:</div>
                    <div class="value">{{ data.proxy_ip.fees_type == 'free' ? '免费IP' : '付费IP' }}</div>
                </el-col>
                <el-col :span="18" class="item" style="margin-top: 8px;">
                    <div class="label">IP地址:</div>
                    <div class="value">{{ data.proxy_ip.ip }}</div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { http } from '@/utils/http'

const props = defineProps({
    data: Object,
    platformObj: Object
})
const sporttypes = ref({
    all: '不限',
    soccer: "足球",
    basketball: "篮球"
})
const emits = defineEmits()
const openDeatil = () => {
    emits('openDeatil', props.data)
}

const handleSwitchChange = async (rowIndex, row) => {
    let a = JSON.parse(JSON.stringify(row))

    a.status = a.status == 1 ? 3 : 1
    let body = {
        status: a.status,
        id: a.id,
    }


    return http
        .post('/member/member_status', body)
        .then(() => {
            emits('refresh')
            //   pageActions.refresh()
            ElMessage.success('修改成功')
            row.status = a.status
        })
        .catch(error => {
            console.log(error);
            emits('initData')
            pageActions.initData()
            ElMessage.success('修改失败')
        })
}

const clickSaveEnergy = () => {
    emits('saveenergy')
}

</script>

<style lang="scss" scoped>
.user_item {
    padding: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;

}

.item1 {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .names {
        display: flex;
        align-items: center;

        .name {
            font-size: 20px;
            font-weight: 600;
            color: #333;
            margin-right: 4px;
            cursor: pointer;
        }


        .type {
            margin-right: 18px;

            .share {
                width: 32px;
                height: 20px;
                border: solid 1px #ff7900;
                background-color: #fff4ec;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                color: #ff7900;
            }

            .exclusive {
                width: 32px;
                height: 20px;
                border: solid 1px #2bc7ac;
                background-color: #eefefb;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 14px;
                color: #2bc7ac;
            }
        }

        .login_status {
            display: flex;
            align-items: center;
        }
    }

    .time {
        font-size: 12px;
        color: #333;
    }
}

.item2 {
    margin-top: 8px;
    display: flex;
    align-items: center;

    .id,
    .password,
    .bctype {
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #8a8a8a;

    }
}

.item3 {
    margin: 16px 0;
    height: 132px;
    background-color: #fafafa;
    padding: 16px;

    .item {
        display: flex;
        flex-direction: column;

        .label {
            font-size: 14px;
            color: #8a8a8a;
        }

        .value {
            font-size: 14px;
            font-weight: bold;
            color: #333;

        }
    }
}

.item4 {

    .item {
        display: flex;
        align-items: center;

        .label {
            font-size: 12px;
            color: #8a8a8a;
        }

        .value {
            font-size: 12px;
            color: #333;
            margin-left: 4px;

        }
    }
}

.status {
    background-size: 12px auto;
    background-repeat: no-repeat;
    background-position: 0 center;
    padding-left: 16px;
}

.status__online {
    color: var(--pcmain-color);
    background-image: url('@/assets/user/online.png');
}

.status__offline {
    color: #778090;
    background-image: url('@/assets/user/offline.png');
}
</style>